<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
	<head>
		<meta http-equiv="Content-Type">
		<meta content="text/html; charset=utf-8">
		<meta charset="utf-8">
		<title>蚂蚁特工队</title>		
		<meta name="viewport" content="target-densitydpi=device-dpi, width=750px, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<script src="/ant/js/zepto.min.js"></script>
		<script type="text/javascript">
		function adaptscreen(widthnum){
			try{
			 var DEFAULT_WIDTH = widthnum, // 页面的默认宽度
		        ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息
		        deviceWidth = window.screen.width, // 设备的宽度
		        devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1
		        targetDensitydpi;    // Android4.0以下手机不支持viewport的width，需要设置target-densitydpi
		        if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {
		        	targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
		        	$('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no');
				}else{
					$('meta[name="viewport"]').attr('content', 'target-densitydpi=device-dpi, width='+DEFAULT_WIDTH+'px, user-scalable=no');
				}
			}catch(e){
				console.log('dpi error',e);
			}
	    }
	    adaptscreen(750);
		</script>
		<link rel="stylesheet" type="text/css" href="/ant/css/reset.css?v=1" />
		<link rel="stylesheet" type="text/css" href="/ant/css/index.css?v=1" />
		<link rel="stylesheet" type="text/css" href="/ant/css/animations.css?v=1" />
        <link rel="stylesheet" type="text/css" href="/ant/css/load.css?v=1" /> 
	</head>
	<body>

    <div id="loading">
     	<div class="spinner">
  			<div class="double-bounce1"></div>
  			<div class="double-bounce2"></div>
		</div>
	</div>

	<div id="content" class="content-index" style="display:none">
		<div class="content-index-inn">
			
			<!-- topbar start -->
			<div class="topbar">
				<a href="/mall/usercenter" class="head"><img id="myHead" src="" /></a>
				<a href="/mall/usercenter" class="money" id="myMoney"></a>
				<div class="js-packet-info packet-info"></div>
			</div>
			<!-- topbar end -->

			<!-- list start -->
			<dl class="list" id="teamList"></dl>
			<!-- list end -->

		</div>
    </div>

    <!-- dialog-packet start -->
    <div class="dialog dialog-packet hide">
		<div class="dialog-mask"></div>
		<div class="dialog-content">
			<div class="dialog-close"></div>

			<p class="tips">一段不起眼的话，一段不起眼的话，一段不起眼的话，一段不起眼的话，一段不起眼的话，一段不起眼的话，一段不起眼的话。</p>
			
			<div class="team-block">
				<div class="tab-block clearfix">
					<span class="tab tab-copper">
						<i class="icon"></i>
						<i class="block"></i>
					</span>
					<span class="tab tab-silver">
						<i class="icon"></i>
						<i class="block"></i>
					</span>
					<span class="tab tab-gold">
						<i class="icon"></i>
						<i class="block"></i>
					</span>
				</div>
				<div class="tab-content-block">
					<div class="tab-content tab-content-copper hide">
						<ul class="packet-list">
							<li>
								<div class="packet-small"><span class="money">10<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">100<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">200<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">400<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">800<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
						</ul>
						<div class="prize"><div class="prize-pic prize-pic--wine"></div></div>
					</div>
					<div class="tab-content tab-content-silver hide">
						<ul class="packet-list">
							<li>
								<div class="packet-small"><span class="money">10<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">300<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">600<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">1200<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">2400<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
						</ul>
						<div class="prize"><div class="prize-pic prize-pic--travel"></div></div>
					</div>
					<div class="tab-content tab-content-gold hide">
						<ul class="packet-list">
							<li>
								<div class="packet-small"><span class="money">10<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">1000<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">2000<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">4000<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
							<li>
								<div class="packet-small"><span class="money">8000<i>元</i></span></div>
								<div class="track">
									<div class="process"><i></i></div>
									<div class="track-mask"></div>
								</div>
								<div class="result">
									<i class="count"><span>0</span>/16</i>
									<p class="text">未解封</p>
								</div>
							</li>
						</ul>
						<div class="prize"><div class="prize-pic prize-pic--car"></div></div>
					</div>
				</div>
			</div>

		</div>
    </div>
    <!-- dialog-packet end -->

	<script src="/ant/js/index.js?v=1"></script>
    <script type="text/javascript">
	document.onreadystatechange = loading; 
	var loading_pc_num=0;
	var loading_pc=setInterval(function(){
		loading_pc_num+=parseInt(Math.random()*6);
		$('.loading_main').html(loading_pc_num+'%');
		if(loading_pc_num>90){
			clearInterval(loading_pc);
		}
	},300);

	function loading(){
		if(document.readyState == "complete"){
			loading_pc_num=94;
			setTimeout(function(){
				startpage();
			},100);
		}
	}

	function startpage(){
		$("#loading").hide();
		$("#content").show();
		//goNext();
	}

	$(function(){

		// 公用弹层事件
		(function() {
			var $dialogMask = $('.dialog-mask');
			var $close = $('.dialog-close');
			var $closeBtn = $('.dialog-closeBtn');

			// mask
			$dialogMask.on('tap', function() {
				$(this).parents('.dialog').addClass('hide');
			});

			// close
			$close.on('tap', function() {
				$(this).parents('.dialog').addClass('hide');
			});

			// closeBtn
			$closeBtn.on('tap', function() {
				$(this).parents('.dialog').addClass('hide');
			});
		}());

		// 点击红包详情按钮
		$('.js-packet-info').on('tap', function() {
			$('.dialog-packet').removeClass('hide');
		});

		getUserInfo();

        function getUserInfo() {
			$.ajax({
				type: "get",
				url: "/api/ant/getUserInfo",
				data: {
				},
				success: function(jdata){
					if (jdata.code == 0) {
						
						var result = jdata.data;

						// init info
						$('#myHead').attr('src', result.avatar);
						$('#myMoney').html( parseInt(result.XYB * 100) );
						
						// construct list
						var listHTML = '';
						for(var i = 0; i < result.team.uid_list.length; i++) {
							var item = result.team.uid_list[i];
							if (i == 0) {
								listHTML += '<dt>' +
												'<img src="' + item.avatar + '" />' +
												'<div class="name">' + item.nickname + '</div>' +
												'<div class="area">' + item.province + item.city + '</div>' +
											'</dt>';
								continue;
							}

							var type = '';
							if (i < 3) { type = '1'; }
							else if (i < 7) { type = '2'; }
							else if (i < 15) { type = '3'; }
							else if (i < 31) { type = '4'; }

							listHTML += '<dd class="type' + type + '">' +
											'<img src="' + item.avatar + '" />' +
											'<div class="name">' + item.nickname + '</div>' +
											'<div class="area">' + item.province + item.city + '</div>' +
										'</dd>';
						}
						$('#teamList').html(listHTML);

						// team type
						var userLayer = 5 - result.ant_user.layer;
						for (var j = 0; j < userLayer; j++) {
							var $item = $('.packet-list li').eq(j);

							if (j < userLayer) {
								// full
								$item.find('.track .process i').css('width', '100%');
								$item.find('.result .count span').html('16');
								$item.find('.result .text').html('已解封');
							} else {
								// last item
								var percent = '0%';
								var text = '';
								if (result.ant_user.join_num == 16) {
									percent = '100%';
									text = '已解封';
								} else {
									percent = (result.ant_user.join_num / 16 * 100) + '%';
									text = '进行中';
								}
								$item.find('.track .process i').css('width', percent);
								$item.find('.result .count span').html(result.ant_user.join_num);
								$item.find('.result .text').html(text);
							}
						}
						$('.tab-block .tab').eq(result.ant_user.level - 1).addClass('tab--active');
						$('.tab-content').eq(result.ant_user.level - 1).removeClass('hide');


					} else {
						alert(jdata.msg);
					}
				},
				error: function(){
                    alert('网络异常')
				}
			});
        }

	});
	</script>
	</body>
</html>
